<template>
    <div class="audio">
        <h1>视频</h1>
        <ul>
            <li v-for="item in result.list" :key="item.r.id">
                <div class="one">
                    <div class="one-left">
                        <div class="one-left-head">
                            <img :src="item.r.a.p" />
                        </div>
                        <div class="one-left-user-name">
                            {{ item.r.a.n }}
                        </div>
                        <div class="one-left-lv">Lv:{{ item.r.a.lvl }}</div>
                    </div>
                    <div class="one-right">
                        <i class="iconfont icon-qita"></i>
                    </div>
                </div>
                <div class="two">
                    <!-- controls：将视频设置为自动播放属性 -->
                    <video :src="item.r.vfurl" controls></video>
                </div>
                <div class="three">
                    <ul>
                        <li v-for="h in item.r.collect_users" :key="h.id">
                            <img :src="h.p" />
                        </li>
                    </ul>
                    <!-- 收藏 -->
                    <div class="collect">{{ item.r.fc }}人收藏</div>
                </div>
                <div class="four">
                    {{ item.r.n }}
                </div>
            </li>
        </ul>
        <div class="dianzi" style="height:6vh"></div>
    </div>
</template>

<script>
export default { //node的导包语句
    data() {
        return {
            result: {
                // 数组
                list: [
                    {
                        type: 1,
                        r: {
                            id: 3190461,
                            n: "牛奶新吃法❗️搅一搅就能做的芝士牛奶冰糕",
                            trim_title: "",
                            //图片
                            img: require("../assets/美食资源/video/img-1.jpeg"),
                            pw: 1920,
                            ph: 1282,
                            vu: "https://vplay.douguo.com/liBnSvFAuoHySMgKUxxm_UiEzh5a__640x362.mp4",
                            //视频地址
                            vfurl: require("../assets/美食资源/video/v-1.mp4"),
                            a: {
                                id: 25431780,
                                n: "静香爱下厨和追剧",
                                v: 1,
                                p: require("../assets/美食资源/video/head-1.jpeg"),
                                lvl: 6,
                                is_prime: false,
                                verified_image: require("../assets/美食资源/video/c.png"),
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "芝士牛奶冰糕",
                            gif: "https://i1.douguo.com/upload/caiku/8/f/3/960_8f0f8a9ca5799513234934795231e7c3.jpeg",
                            p: "https://i1.douguo.com/upload/caiku/8/f/3/960_8f0f8a9ca5799513234934795231e7c3.jpeg",
                            vc: "26.1w",
                            fc: 5621,
                            collect_count_text: "5621人收藏",
                            dc: "1",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 16321995,
                                    n: "简单ztfw",
                                    p: "http://tx1.douguo.net/upload/photo/5/8/d/70_u53391084455072124348.jpg",
                                    lv: 3,
                                    lvl: 3,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 24848131,
                                    n: "呆呆的绵白糖",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_b7827e1b7bb12aeee0eb5eb4d2726f73.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 15629994,
                                    n: "nancy001023",
                                    p: "http://tx1.douguo.net/upload/photo/8/9/b/70_u48591902655558152502.jpg",
                                    lv: 2,
                                    lvl: 2,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 17831869,
                                    n: "莎莎bozh",
                                    p: "http://tx1.douguo.net/upload/photo/7/0/3/70_u66990200380440125826.jpg",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_HOT",
                            events: [
                                {
                                    c: "中小学生做饭指南",
                                    u: "https://m.douguo.com/activity/ncpzj/detail/3485?isapp=1&open=0&_vs=1000300&&dg_refreshkey=publishnote",
                                    id: "1567",
                                },
                            ],
                        },
                    },
                    {
                        type: 1,
                        r: {
                            id: 3196343,
                            n: "盐焗花生米空气炸锅版",
                            trim_title: "",
                            img: require("../assets/美食资源/video/img-2.jpg"),
                            pw: 1005,
                            ph: 1158,
                            vu: "https://vplay.douguo.com/FoDUhHeusbZFVZFDsXB5DauXIFg7__360x640.mp4",
                            //视频地址
                            vfurl: require("../assets/美食资源/video/v-2.mp4"),
                            a: {
                                id: 3543122,
                                n: "眉眉健康厨房",
                                v: 1,
                                p: require("../assets/美食资源/video/head-2.jpg"),
                                lvl: 7,
                                is_prime: false,
                                verified_image: require("../assets/美食资源/video/c.png"),
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "盐焗花生米空气炸锅版",
                            gif: "https://i1.douguo.com/upload/caiku/1/d/a/960_1d4363d92a4b0efd7c261844bc7d988a.jpg",
                            p: "https://i1.douguo.com/upload/caiku/1/d/a/960_1d4363d92a4b0efd7c261844bc7d988a.jpg",
                            vc: "2.0w",
                            fc: 451,
                            collect_count_text: "451人收藏",
                            dc: "0",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 27224521,
                                    n: "很冷的枣仁很红彤彤",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_55fedc7df97ad8d0960e0b7d091d2448.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 25810700,
                                    n: "一笺墨香",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_6a99cb588b890f75d8fd8b385347c2b5.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 24341773,
                                    n: "有趣的牛肾很流泪",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_b916105c8502ab223be6fb1000443fad.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 24254612,
                                    n: "╰┛你走之后※",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_3a9bcf696b2eefa37d336b3072c99448.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_FAIR",
                        },
                    },
                    {
                        type: 1,
                        r: {
                            id: 3192777,
                            n: "这菜香爆了！2分钟学道下饭菜，上桌秒光盘~",
                            trim_title: "",
                            img: require("../assets/美食资源/video/img-3.jpg"),
                            pw: 2000,
                            ph: 1333,
                            vu: "https://vplay.douguo.com/lvT86s8H-KELgN2YKLPQcNoSDq3c__640x356.mp4",
                            vfurl: require("../assets/美食资源/video/v-3.mp4"),
                            a: {
                                id: 25597857,
                                n: "老板娘微食记",
                                v: 1,
                                p: require("../assets/美食资源/video/head-3.jpg"),
                                lvl: 6,
                                is_prime: false,
                                verified_image: require("../assets/美食资源/video/c.png"),
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "2分钟学道下饭菜",
                            gif: "https://i1.douguo.com/upload/caiku/f/b/b/960_fb26796b1e795a0ee910e6ef8822fd0b.jpg",
                            p: "https://i1.douguo.com/upload/caiku/f/b/b/960_fb26796b1e795a0ee910e6ef8822fd0b.jpg",
                            vc: "9.0w",
                            fc: 840,
                            collect_count_text: "840人收藏",
                            dc: "0",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 27239966,
                                    n: "薄荷不猫",
                                    p: "http://tx1.douguo.net/upload/photo/d/a/5/70_da09dd357cdaf848970145d5ab1af7b5.jpg",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 25709988,
                                    n: "吃不完的鸭脖",
                                    p: "http://tx1.douguo.net/upload/photo/3/7/7/70_37d17d8bf4b740df792e45434f621317.jpg",
                                    lv: 4,
                                    lvl: 4,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 8934364,
                                    n: "漫步落英",
                                    p: "http://tx1.douguo.net/upload/photo/6/d/8/70_u28840012932591055246.jpg",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 24797620,
                                    n: "念旧的郫县辣酱",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_b97bf29b3962cd687aa322624eec6a99.png",
                                    lv: 2,
                                    lvl: 2,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_HOT",
                        },
                    },
                    {
                        type: 1,
                        r: {
                            id: 3196479,
                            n: "香菇鹌鹑蛋",
                            trim_title: "",
                            img: require("../assets/美食资源/video/img-4.jpg"),
                            pw: 540,
                            ph: 960,
                            vu: "https://vplay.douguo.com/lkcdnUdoC-ILX1v6132EdtV6ixlE",
                            vfurl: require("../assets/美食资源/video/v-4.mp4"),
                            a: {
                                id: 27231699,
                                n: "辛就美食",
                                v: 0,
                                p: require("../assets/美食资源/video/head-4.jpg"),
                                lvl: 3,
                                is_prime: false,
                                verified_image: "",
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "香菇鹌鹑蛋",
                            gif: "https://i1.douguo.com/upload/caiku/2/3/0/960_1654950775096.jpg",
                            p: "https://i1.douguo.com/upload/caiku/2/3/0/960_1654950775096.jpg",
                            vc: "1283",
                            fc: 21,
                            collect_count_text: "21人收藏",
                            dc: "0",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 26882485,
                                    n: "油乎乎的酱萝卜很透明",
                                    p: "http://tx1.douguo.net/upload/photo/4/4/7/70_44da1327a5a7b0985a9ebe2f4a98eb07.jpg",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 18506255,
                                    n: "西西草原牧人家",
                                    p: "http://tx1.douguo.net/upload/photo/5/8/b/70_58ab5dcced62807895a9479c3f02e38b.jpg",
                                    lv: 6,
                                    lvl: 6,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 18506256,
                                    n: "神马14",
                                    p: "http://tx1.douguo.net/upload/photo/0/b/1/70_0bf9908bc0ad110269138445af55a551.jpg",
                                    lv: 3,
                                    lvl: 3,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 18506257,
                                    n: "李海华是个小财迷",
                                    p: "http://tx1.douguo.net/upload/photo/e/8/2/70_u21152549429993203550.jpg",
                                    lv: 2,
                                    lvl: 2,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_FAIR",
                        },
                    },
                    {
                        type: 1,
                        r: {
                            id: 3193664,
                            n: "葱油焖鸡",
                            trim_title: "",
                            img: require("../assets/美食资源/video/img-5.jpg"),
                            pw: 540,
                            ph: 960,
                            vu: "https://vplay.douguo.com/lra0zUh6MPKi6_DQHhj7RJFWyQJp__362x640.mp4",
                            vfurl: require("../assets/美食资源/video/v-5.mp4"),
                            a: {
                                id: 20126956,
                                n: "哦妈妈眯呀、",
                                v: 0,
                                p: require("../assets/美食资源/video/head-5.jpg"),
                                lvl: 3,
                                is_prime: false,
                                verified_image: "",
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "焖鸡",
                            gif: "https://i1.douguo.com/upload/caiku/4/0/8/960_1653734904300.jpg",
                            p: "https://i1.douguo.com/upload/caiku/4/0/8/960_1653734904300.jpg",
                            vc: "7.8w",
                            fc: 800,
                            collect_count_text: "800人收藏",
                            dc: "0",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 27070416,
                                    n: "古老的蛋很形形色色",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_b97bf29b3962cd687aa322624eec6a99.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 10623975,
                                    n: "包玉华",
                                    p: "http://tx1.douguo.net/upload/photo/a/a/5/70_u3814442832719191010.jpeg",
                                    lv: 3,
                                    lvl: 3,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 15629994,
                                    n: "nancy001023",
                                    p: "http://tx1.douguo.net/upload/photo/8/9/b/70_u48591902655558152502.jpg",
                                    lv: 2,
                                    lvl: 2,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 27236927,
                                    n: "这饭真好吃",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_51d4312c7c667f998a2fd7f0f1624f7d.png",
                                    lv: 2,
                                    lvl: 2,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_HOT",
                        },
                    },
                    {
                        type: 1,
                        r: {
                            id: 3191797,
                            n: "家常杏鲍菇丝炒肉丝",
                            trim_title: "",
                            img: require("../assets/美食资源/video/img-6.jpg"),
                            pw: 1080,
                            ph: 2400,
                            vu: "https://vplay.douguo.com/lpv-UqOyI2mvzzKtoBt7M9olxXD1__362x640.mp4",
                            vfurl: require("../assets/美食资源/video/v-6.mp4"),
                            a: {
                                id: 2097191,
                                n: "竹子拌豆腐干",
                                v: 0,
                                p: require("../assets/美食资源/video/head-6.jpg"),
                                lvl: 5,
                                is_prime: false,
                                verified_image: "",
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "家常杏鲍菇丝炒肉丝",
                            gif: "https://i1.douguo.com/upload/caiku/1/1/2/960_11b0de6163395793f211b3d3feb2d732.jpg",
                            p: "https://i1.douguo.com/upload/caiku/1/1/2/960_11b0de6163395793f211b3d3feb2d732.jpg",
                            vc: "17.4w",
                            fc: 3903,
                            collect_count_text: "3903人收藏",
                            dc: "0",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 2882537,
                                    n: "嘟嘟菲妈",
                                    p: "http://tx1.douguo.net/upload/photo/2/2/a/70_u71739349145999224231.gif",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 27239966,
                                    n: "薄荷不猫",
                                    p: "http://tx1.douguo.net/upload/photo/d/a/5/70_da09dd357cdaf848970145d5ab1af7b5.jpg",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 27239986,
                                    n: "越努力越幸运avju",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_5194e55fbc06816597a6a11175c3b401.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 27239635,
                                    n: "资深的福寿螺很光彩夺目",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_36e82d2839518d8228210e4227bf623d.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_HOT",
                            events: [
                                {
                                    c: "金龙鱼橄榄油调和油｜520 爱的表达不止一种",
                                    u: "https://m.douguo.com/activity/ncpzj/detail/3467?isapp=1&open=0&_vs=1000300&&dg_refreshkey=publishnote",
                                    id: "1555",
                                },
                            ],
                        },
                    },
                    {
                        type: 1,
                        r: {
                            id: 3191422,
                            n: "【童年的味道】",
                            trim_title: "",
                            img: require("../assets/美食资源/video/img-7.jpg"),
                            pw: 540,
                            ph: 960,
                            vu: "https://vplay.douguo.com/lj0C7xTp6lrBA4ATAN0v93Ecw3D1__362x640.mp4",
                            vfurl: require("../assets/美食资源/video/v-7.mp4"),
                            a: {
                                id: 5917093,
                                n: "行走的梦想家",
                                v: 0,
                                p: require("../assets/美食资源/video/head-7.jpeg"),
                                lvl: 5,
                                is_prime: false,
                                verified_image: "",
                                progress_image: "",
                                verified_url: "https://m.douguo.com/user/prodesc",
                            },
                            stdname: "味道",
                            gif: "https://i1.douguo.com/upload/caiku/9/4/e/960_1652933460810.jpg",
                            p: "https://i1.douguo.com/upload/caiku/9/4/e/960_1652933460810.jpg",
                            vc: "7.5w",
                            fc: 1587,
                            collect_count_text: "1587人收藏",
                            dc: "0",
                            collect_status: 0,
                            collect_users: [
                                {
                                    id: 27239017,
                                    n: "完美的儿童奶粉",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_f2c05c1bbf50c99c105206bc11661dc0.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 27237324,
                                    n: "易碎的金桔很冷冻",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_c5e6bc6d975d5c79761c921e97768271.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 16540372,
                                    n: "我是女女",
                                    p: "http://tx1.douguo.net/upload/photo/e/1/d/70_e1b1d55a088f4492b76802cdb5eb1bdd.jpg",
                                    lv: 3,
                                    lvl: 3,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                                {
                                    id: 27235290,
                                    n: "饿醒的黑豆苗很放松",
                                    p: "http://tx1.douguo.net/upload/photo/1/1/1/70_1bc7a2286b31c7e3e9d75156b0407ce9.png",
                                    lv: 1,
                                    lvl: 1,
                                    is_prime: false,
                                    verified_image: "",
                                    v: 0,
                                },
                            ],
                            recall: "C_V_NEW_FAIR",
                            events: [
                                {
                                    c: "妈妈手中的安心味",
                                    u: "https://m.douguo.com/activity/ncpzj/detail/3475?isapp=1&open=0&_vs=1000300&&dg_refreshkey=publishnote",
                                    id: "1560",
                                },
                            ],
                        },
                    },
                ],
            },
        };
    },
};
</script>

<style scoped>


* {
    margin: 0;
    padding: 0;
}

.audio {
    width: 100%;
    /* height: 100vh; */
    background-color: black;
    color: white;
}

.audio h1 {
    font-size: 24px;
    text-align: center;
}

.audio ul li {}

.audio ul li .one {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 20px;
}

.audio ul li .one .one-left {
    display: flex;
    align-items: center;
}

.audio ul li .one .one-right {
    display: flex;
    align-items: center;
}

.audio ul li .one .one-left .one-left-head {
    width: 40px;
    height: 40px;
}

.audio ul li .one .one-left .one-left-head img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.audio ul li .one .one-left .one-left-user-name {
    font-size: 15px;
    padding: 0 10px;
}

.audio ul li .one .one-left .one-left-lv {
    font-size: 12px;
    margin-top: 2px;
    color: orangered;
    font-style: italic;
}

.audio ul li .two video {
    width: 100%;
    height: 35vh;
}

.audio ul li .three {
    padding: 5px 10px;
    display: flex;
}

.audio ul li .three ul {
    display: flex;
    position: relative;
}

.audio ul li .three ul li img {
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 50%;
    background-color: black;
}

.audio ul li .three ul li:nth-child(2) {
    position: absolute;
    left: 15px;
}

.audio ul li .three ul li:nth-child(3) {
    position: absolute;
    left: 30px;
}

.audio ul li .three ul li:nth-child(4) {
    position: absolute;
    left: 45px;
}

.audio ul li .three .collect {
    font-size: 12px;
    line-height: 27px;
    margin-left: 60px;
    color: gray;
}

.audio ul li .four {
    padding: 0 10px;
    line-height: 30px;
    margin-top: 10px;
}

.dianzi {}

</style>



